<!DOCTYPE html>



  


<html class="theme-next gemini use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.2" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="Css-BFC作用域," />





  <link rel="alternate" href="/atom.xml" title="OBKoro1's Blog" type="application/atom+xml" />




  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.2" />






<meta name="description" content="写在前面好记性不如烂笔头，研究了一下BFC，发现里面比较细的东西也是很多的！关于BFC，很多人可能都听说过BFC这个东西，大概知道这是个啥东西，相信很多人对此并没有一个非常细致的了解，本文预计篇幅较长，认真，耐着性子看，应该都能够比较深入的理解BFC这个概念的规则、作用以及用法。希望喜欢的朋友可以点个赞，或者关注一波本人，谢谢。 BFC是什么鬼？BFC概括：可以在心中记住这么一个概念———所谓的B">
<meta name="keywords" content="Css-BFC作用域">
<meta property="og:type" content="article">
<meta property="og:title" content="[布局概念] 关于CSS-BFC深入理解">
<meta property="og:url" content="http://yoursite.com/2017/10/11/布局概念-关于CSS-BFC深入理解/index.html">
<meta property="og:site_name" content="OBKoro1&#39;s Blog">
<meta property="og:description" content="写在前面好记性不如烂笔头，研究了一下BFC，发现里面比较细的东西也是很多的！关于BFC，很多人可能都听说过BFC这个东西，大概知道这是个啥东西，相信很多人对此并没有一个非常细致的了解，本文预计篇幅较长，认真，耐着性子看，应该都能够比较深入的理解BFC这个概念的规则、作用以及用法。希望喜欢的朋友可以点个赞，或者关注一波本人，谢谢。 BFC是什么鬼？BFC概括：可以在心中记住这么一个概念———所谓的B">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://dn-mhke0kuv.qbox.me/b80801d8707be24ecbc0">
<meta property="og:image" content="https://dn-mhke0kuv.qbox.me/6b0fc0e3d34f94875d35.gif">
<meta property="og:image" content="https://dn-mhke0kuv.qbox.me/6daeb3cbf5f82d1f6db8.gif">
<meta property="og:image" content="https://dn-mhke0kuv.qbox.me/dfe63a3d19cae8adf5fa.gif">
<meta property="og:image" content="https://dn-mhke0kuv.qbox.me/0e2c7b710c4a13111120.gif">
<meta property="og:image" content="https://dn-mhke0kuv.qbox.me/304255779293ba4c2082.gif">
<meta property="og:image" content="https://dn-mhke0kuv.qbox.me/216207666aa8bef15115">
<meta property="og:image" content="https://dn-mhke0kuv.qbox.me/5f7dc07585ae6c512bb8">
<meta property="og:image" content="https://dn-mhke0kuv.qbox.me/c02b2396d987f4d7439a">
<meta property="og:image" content="https://dn-mhke0kuv.qbox.me/5994ed11ebc3e4b971db.gif">
<meta property="og:updated_time" content="2019-06-15T06:19:47.655Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="[布局概念] 关于CSS-BFC深入理解">
<meta name="twitter:description" content="写在前面好记性不如烂笔头，研究了一下BFC，发现里面比较细的东西也是很多的！关于BFC，很多人可能都听说过BFC这个东西，大概知道这是个啥东西，相信很多人对此并没有一个非常细致的了解，本文预计篇幅较长，认真，耐着性子看，应该都能够比较深入的理解BFC这个概念的规则、作用以及用法。希望喜欢的朋友可以点个赞，或者关注一波本人，谢谢。 BFC是什么鬼？BFC概括：可以在心中记住这么一个概念———所谓的B">
<meta name="twitter:image" content="https://dn-mhke0kuv.qbox.me/b80801d8707be24ecbc0">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Gemini',
    version: '5.1.2',
    sidebar: {"position":"left","display":"post","offset":12,"offset_float":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://yoursite.com/2017/10/11/布局概念-关于CSS-BFC深入理解/"/>





  <title>[布局概念] 关于CSS-BFC深入理解 | OBKoro1's Blog</title>
  





  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?64d57d0b926bbd27431daa89d2e0a76b";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>




</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">OBKoro1's Blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-前端算法">
          <a href="/arithmetic/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-book"></i> <br />
            
            前端算法
          </a>
        </li>
      
        
        <li class="menu-item menu-item-博客最新更新">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            博客最新更新
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-commonweal">
          <a href="/404/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-heartbeat"></i> <br />
            
            公益404
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/10/11/布局概念-关于CSS-BFC深入理解/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="OBKoro1">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/uploads/hand1.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="OBKoro1's Blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">[布局概念] 关于CSS-BFC深入理解</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-10-11T22:48:41+08:00">
                2017-10-11
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/css/" itemprop="url" rel="index">
                    <span itemprop="name">css</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          
             <span id="/2017/10/11/布局概念-关于CSS-BFC深入理解/" class="leancloud_visitors" data-flag-title="[布局概念] 关于CSS-BFC深入理解">
               <span class="post-meta-divider">|</span>
               <span class="post-meta-item-icon">
                 <i class="fa fa-eye"></i>
               </span>
               
                 <span class="post-meta-item-text">阅读次数&#58;</span>
               
                 <span class="leancloud-visitors-count"></span>
             </span>
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  2,766 字
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  10分钟
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h2 id="写在前面"><a href="#写在前面" class="headerlink" title="写在前面"></a>写在前面</h2><p>好记性不如烂笔头，研究了一下BFC，发现里面比较细的东西也是很多的！关于BFC，很多人可能都听说过BFC这个东西，大概知道这是个啥东西，相信很多人对此并没有一个非常细致的了解，本文预计篇幅较长，认真，耐着性子看，应该都能够比较深入的理解BFC这个概念的规则、作用以及用法。希望喜欢的朋友可以点个赞，或者关注一波本人，谢谢。</p>
<h2 id="BFC是什么鬼？"><a href="#BFC是什么鬼？" class="headerlink" title="BFC是什么鬼？"></a>BFC是什么鬼？</h2><p><strong>BFC概括：</strong>可以在心中记住这么一个概念———<strong>所谓的BFC就是css布局的一个概念，是一块区域，一个环境。</strong></p>
<p>先稳住别懵逼，接着往下走。</p>
<h4 id="关于BFC的定义："><a href="#关于BFC的定义：" class="headerlink" title="关于BFC的定义："></a>关于BFC的定义：</h4><p>BFC(Block formatting context)直译为”块级格式化上下文”。它<strong>是一个独立的渲染区域</strong>，只有<strong>Block-level box</strong>参与（在下面有解释）， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。</p>
<p>我们常说的文档流其实分为定位流、浮动流和普通流三种。而<strong>普通流其实就是指BFC中的FC</strong>。</p>
<p><strong>FC</strong>是formatting context的首字母缩写，直译过来是格式化上下文，它<strong>是页面中的一块渲染区域</strong>，有一套渲染规则，决定了其<strong>子元素如何布局，以及和其他元素之间的关系和作用。</strong></p>
<p>常见的FC有BFC、IFC（行级格式化上下文），还有GFC（网格布局格式化上下文）和FFC（自适应格式化上下文），这里就不再展开了。</p>
<h4 id="通俗一点的方式解释"><a href="#通俗一点的方式解释" class="headerlink" title="通俗一点的方式解释:"></a>通俗一点的方式解释:</h4><p>BFC 可以简单的理解为<strong>某个元素的一个 CSS 属性</strong>，只不过这个属性<strong>不能被开发者显式的修改</strong>，拥有这个属性的元素对内部元素和外部元素会表现出一些特性，这就是BFC。</p>
<h2 id="下面列一波目录，然后分别展开来讲："><a href="#下面列一波目录，然后分别展开来讲：" class="headerlink" title="下面列一波目录，然后分别展开来讲："></a>下面列一波目录，然后分别展开来讲：</h2><h3 id="触发条件或者说哪些元素会生成BFC："><a href="#触发条件或者说哪些元素会生成BFC：" class="headerlink" title="触发条件或者说哪些元素会生成BFC："></a>触发条件或者说哪些元素会生成BFC：</h3><p>　　满足下列条件之一就可触发BFC</p>
<p>　　【1】根元素，即HTML元素</p>
<p>　　【2】float的值不为none</p>
<p>　　【3】overflow的值不为visible</p>
<p>　　【4】display的值为inline-block、table-cell、table-caption</p>
<p>　　【5】position的值为absolute或fixed
　　</p>
<h3 id="BFC布局规则："><a href="#BFC布局规则：" class="headerlink" title="BFC布局规则："></a>BFC布局规则：</h3><p>1.内部的Box会在垂直方向，一个接一个地放置。</p>
<p>2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠</p>
<p>3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。</p>
<p>4.BFC的区域不会与float box重叠。</p>
<p>5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。</p>
<p>6.计算BFC的高度时，浮动元素也参与计算</p>
<h3 id="BFC有哪些作用："><a href="#BFC有哪些作用：" class="headerlink" title="BFC有哪些作用："></a>BFC有哪些作用：</h3><ol>
<li>自适应两栏布局<br>2可以阻止元素被浮动元素覆盖<br>3可以包含浮动元素——清除内部浮动<br>4.分属于不同的BFC时可以阻止margin重叠</li>
</ol>
<hr>
<h4 id="BFC布局规则1：内部的Box会在垂直方向，一个接一个地放置。"><a href="#BFC布局规则1：内部的Box会在垂直方向，一个接一个地放置。" class="headerlink" title="BFC布局规则1：内部的Box会在垂直方向，一个接一个地放置。"></a>BFC布局规则1：内部的Box会在垂直方向，一个接一个地放置。</h4><p>上文定义中提到过的块级盒：block-level box，在这里解析一波：</p>
<p><img src="https://dn-mhke0kuv.qbox.me/b80801d8707be24ecbc0" alt="这个就是我们平常操作盒子的组成"></p>
<p>我们平常说的盒子是由margin、border、padding、content组成的，实际上每种类型的四条边定义了一个盒子，分别是分别是<strong>content box、padding box、border box、margin box</strong>，这四种类型的盒子一直存在，即使他们的值为0.决定块盒在包含块中与相邻块盒的垂直间距的便是margin-box。</p>
<p><strong>提示：</strong>Box之间的距离虽然也可以使用padding来控制，但是此时实际上还是属于box内部里面，而且使用padding来控制的话就不能再使用border属性了。</p>
<p>布局规则1就是我们<strong>平常div一行一行块级放置的样式</strong>，大家想一下就知道了，这里就不展开了。</p>
<h3 id="BFC布局规则2：Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。"><a href="#BFC布局规则2：Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。" class="headerlink" title="BFC布局规则2：Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。"></a>BFC布局规则2：Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。</h3><p><img src="https://dn-mhke0kuv.qbox.me/6b0fc0e3d34f94875d35.gif" alt=""></p>
<p>上文提到过，决定块盒在包含块中与相邻块盒的垂直间距的便是margin-box。，上面的栗子就是这种情况。</p>
<p><strong>演示中css属性设置：</strong>上面的box：margin-bottom: 100px;下面的box：margin-top: 100px;（他们是同一侧的margin，所以会发生margin重叠的情况，两个div的距离实际上只有100px。）</p>
<h3 id="BFC的作用4：阻止margin重叠"><a href="#BFC的作用4：阻止margin重叠" class="headerlink" title="BFC的作用4：阻止margin重叠:"></a>BFC的作用4：阻止margin重叠:</h3><p>当两个相邻块级子元素<strong>分属于不同的BFC</strong>时可以<strong>阻止margin重叠</strong></p>
<p><strong>操作方法：</strong>给其中一个div外面包一个div，然后通过触发外面这个div的BFC，就可以阻止这两个div的margin重叠</p>
<p>下面是代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;aside&quot;&gt;&lt;/div&gt;</span><br><span class="line">&lt;div class=&quot;text&quot;&gt;</span><br><span class="line">    &lt;div class=&quot;main&quot;&gt;&lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;!--下面是css代码--&gt;</span><br><span class="line"> .aside &#123;</span><br><span class="line">            margin-bottom: 100px;//margin属性</span><br><span class="line">            width: 100px;</span><br><span class="line">            height: 150px;</span><br><span class="line">            background: #f66;</span><br><span class="line">        &#125;</span><br><span class="line">        .main &#123;</span><br><span class="line">            margin-top: 100px;//margin属性</span><br><span class="line">            height: 200px;</span><br><span class="line">            background: #fcc;</span><br><span class="line">        &#125;</span><br><span class="line">         .text&#123;</span><br><span class="line">            /*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/</span><br><span class="line">            overflow: hidden;//此时已经触发了BFC属性。</span><br><span class="line">        &#125;</span><br></pre></td></tr></table></figure>
<p><strong>ps：</strong>触发方式可以参考上文给出的触发条件。</p>
<h3 id="这里有一个网址可以在线演示，通过演示，可以更直观一点："><a href="#这里有一个网址可以在线演示，通过演示，可以更直观一点：" class="headerlink" title="这里有一个网址可以在线演示，通过演示，可以更直观一点："></a>这里有一个网址可以在线演示，通过演示，可以更直观一点：</h3><p><img src="https://dn-mhke0kuv.qbox.me/6daeb3cbf5f82d1f6db8.gif" alt="这里面也是一篇好文章，关于BFC的"></p>
<p>链接地址：<a href="http://www.cnblogs.com/xiaohuochai/p/5248536.html" target="_blank" rel="noopener">http://www.cnblogs.com/xiaohuochai/p/5248536.html</a></p>
<h3 id="BFC布局规则3：每个元素的margin-box的左边，-与包含块border-box的左边相接触-对于从左往右的格式化，否则相反-。即使存在浮动也是如此。"><a href="#BFC布局规则3：每个元素的margin-box的左边，-与包含块border-box的左边相接触-对于从左往右的格式化，否则相反-。即使存在浮动也是如此。" class="headerlink" title="BFC布局规则3：每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。"></a>BFC布局规则3：每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;par&quot;&gt;</span><br><span class="line">    &lt;div class=&quot;child&quot;&gt;&lt;/div&gt;</span><br><span class="line">    //给这两个子div加浮动，浮动的结果，如果没有清除浮动的话，父div不会将下面两个div包裹，但还是在父div的范围之内。</span><br><span class="line">    &lt;div class=&quot;child&quot;&gt;&lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<p><strong>解析：</strong>给这两个子div加浮动，浮动的结果，如果没有清除浮动的话，父div不会将下面两个div包裹，但还是在父div的范围之内，<strong>左浮是子div的左边接触父div的borderbox的左边，右浮是子div接触父div的borderbox右边</strong>，除非设置margin来撑开距离，否则一直是这个规则。</p>
<h3 id="BFC作用3：可以包含浮动元素——清除内部浮动"><a href="#BFC作用3：可以包含浮动元素——清除内部浮动" class="headerlink" title="BFC作用3：可以包含浮动元素——清除内部浮动"></a>BFC作用3：可以包含浮动元素——清除内部浮动</h3><p>给父divpar加上 overflow: hidden;</p>
<p><strong>清除浮动原理：</strong>触发父div的BFC属性，使下面的子div都<strong>处在父div的同一个BFC区域之内</strong>，此时已成功清除浮动。</p>
<p><img src="https://dn-mhke0kuv.qbox.me/dfe63a3d19cae8adf5fa.gif" alt=""></p>
<p>还可以向同一个方向浮动来达到清除浮动的目的，清除浮动的原理是两个div都位于同一个浮动的BFC区域之中。</p>
<h3 id="BFC布局规则4：BFC的区域不会与float-box重叠："><a href="#BFC布局规则4：BFC的区域不会与float-box重叠：" class="headerlink" title="BFC布局规则4：BFC的区域不会与float box重叠："></a>BFC布局规则4：BFC的区域不会与float box重叠：</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;aside&quot;&gt;&lt;/div&gt;</span><br><span class="line">&lt;div class=&quot;text&quot;&gt;</span><br><span class="line">    &lt;div class=&quot;main&quot;&gt;&lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;!--下面是css代码--&gt;</span><br><span class="line"> .aside &#123;</span><br><span class="line">            width: 100px;</span><br><span class="line">            height: 150px;</span><br><span class="line">            float: left;</span><br><span class="line">            background: #f66;</span><br><span class="line">        &#125;</span><br><span class="line">        .main &#123;</span><br><span class="line">            height: 200px;</span><br><span class="line">            overflow: hidden;//触发main盒子的BFC</span><br><span class="line">            background: #fcc;</span><br><span class="line">        &#125;</span><br><span class="line">           .text&#123;</span><br><span class="line">            width: 500px;</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>
<p>上面aside盒子有一个浮动属性，覆盖了main盒子的内容，main盒子没有清除aside盒子的浮动。只做了一个动作，就是<strong>触发自身的BFC</strong>，然后就<strong>不再被aside盒子覆盖</strong>了。所以：<strong>BFC的区域不会与float box重叠</strong>。</p>
<p><img src="https://dn-mhke0kuv.qbox.me/0e2c7b710c4a13111120.gif" alt=""></p>
<h4 id="BFC作用：自适应两栏布局。"><a href="#BFC作用：自适应两栏布局。" class="headerlink" title="BFC作用：自适应两栏布局。"></a>BFC作用：自适应两栏布局。</h4><p><img src="https://dn-mhke0kuv.qbox.me/304255779293ba4c2082.gif" alt=""></p>
<p>还是上面的代码，此时BFC的区域不会与float box重叠，因此<strong>会根据包含块（父div）的宽度，和aside的宽度，自适应宽度。</strong></p>
<hr>
<h3 id="BFC-与-Layout"><a href="#BFC-与-Layout" class="headerlink" title="BFC 与 Layout"></a>BFC 与 Layout</h3><p>IE 作为浏览器中的奇葩，当然不可能按部就班的支持 BFC 标准，于是乎 IE 中有了 Layout 这个东西。<strong>Layout 和 BFC 基本是等价的</strong>，为了处理 IE 的兼容性，在需要触发 BFC 时，我们除了需要用触发条件中的 CSS 属性来触发 BFC，还需要针对 IE 浏览器使用 zoom: 1 来触发 IE 浏览器的 Layout。</p>
<h3 id="有趣的文本"><a href="#有趣的文本" class="headerlink" title="有趣的文本:"></a>有趣的文本:</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">.par &#123;</span><br><span class="line">           margin-top: 3rem;</span><br><span class="line">           border: 5px solid #fcc;</span><br><span class="line">           width: 300px;</span><br><span class="line">       &#125;</span><br><span class="line">       .child &#123;</span><br><span class="line">           border: 5px solid #f66;</span><br><span class="line">           width:100px;</span><br><span class="line">           height: 100px;</span><br><span class="line">           float: left;</span><br><span class="line">       &#125;</span><br></pre></td></tr></table></figure>
<p><img src="https://dn-mhke0kuv.qbox.me/216207666aa8bef15115" alt=""></p>
<p><del>当我使用上面的属性，再加上一个没有属性的p或者span标签，就发现两个子div的float属性自动被清除了，这是因为span或者p这类文本自带一个BFC吗？还是什么？求路过的大神解释。。。</del></p>
<p>以上是错误的。这里两个div被撑开，是因为父div被p标签撑开了，并不是因为清除浮动的原因，从下面这张图片可以清楚的知道。</p>
<p><img src="https://dn-mhke0kuv.qbox.me/5f7dc07585ae6c512bb8" alt=""></p>
<p>其实以上的几个例子都体现了BFC布局规则第五条————
　</p>
<h3 id="BFC布局规则5：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。"><a href="#BFC布局规则5：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。" class="headerlink" title="BFC布局规则5：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。"></a>BFC布局规则5：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。</h3><hr>
<h3 id="文本环绕float："><a href="#文本环绕float：" class="headerlink" title="文本环绕float："></a>文本环绕float：</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;div style=&quot;float: left; width: 100px; height: 100px; background: #000;&quot;&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;div style=&quot;height: 200px; background: #AAA;&quot;&gt;</span><br><span class="line">    &lt;div style=&quot; width: 30px; height: 30px; background: red;&quot;&gt;&lt;/div&gt;</span><br><span class="line">    &lt;p&gt;content&lt;/p&gt; &lt;p&gt;content&lt;/p&gt; &lt;p&gt;content&lt;/p&gt; &lt;p&gt;content&lt;/p&gt; &lt;p&gt;content&lt;/p&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<p><img src="https://dn-mhke0kuv.qbox.me/c02b2396d987f4d7439a" alt=""></p>
<p>问题：为什么 div 的左上角被覆盖了，而文本却没有被覆盖，float不是应该跟普通流不在一个层级吗？是因为float属性不生效吗？</p>
<h3 id="解决："><a href="#解决：" class="headerlink" title="解决："></a>解决：</h3><h3 id="float的定义和用法："><a href="#float的定义和用法：" class="headerlink" title="float的定义和用法："></a>float的定义和用法：</h3><p>float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，<strong>使文本围绕在图像周围</strong>，不过在 CSS 中，<strong>任何元素都可以浮动</strong>。浮动元素会生成一个块级框，而不论它本身是何种元素。</p>
<p><img src="https://dn-mhke0kuv.qbox.me/5994ed11ebc3e4b971db.gif" alt=""></p>
<p>从上图可以看到，float属性确实生效，将float隐藏后，下面还有一个红色的div，这个div是被黑色div所覆盖掉的。<strong>div会被float覆盖，而文本却没有被float覆盖</strong>，是因为<strong>float当初设计的时候</strong>就是为了<strong>使文本围绕在浮动对象的周围</strong>。</p>
<hr>
<h2 id="后话"><a href="#后话" class="headerlink" title="后话"></a>后话</h2><p>上面说的有些东西，其实在我们平常的布局中，已经有在使用这些规律，只是没有总结出来，如果写的不好之处欢迎批评指导。还有一篇关于闭包的，还没写完。。五一三天净打游戏了！应该很快就会写好了。</p>
<p><strong>最后</strong>：码字不易，<strong>感谢</strong>支持！因为我经常看不懂别人写的分享，所以个人写文比较偏小白，写的不好之处，欢迎指点。然后就是希望看完的朋友点个<strong>喜欢</strong>，也可以<strong>关注</strong>一下我。<br><strong>ps</strong>：目前<strong>待业</strong>，坐标北京，本人适应互联网快节奏，高强度，持续学习，持续成长，认真，严谨，学习积极性强。<strong>中小公司大佬求带走</strong>，邮箱：<a href="mailto:1677593011@qq.com" target="_blank" rel="noopener">1677593011@qq.com</a>。<br><a href="http://www.jianshu.com/u/8d1dd8c80f06" target="_blank" rel="noopener"></a><strong><a href="https://juejin.im/user/58714f0eb123db4a2eb95372" target="_blank" rel="noopener">掘金个人主页</a>  ，</strong><a href="http://www.jianshu.com/u/8d1dd8c80f06" target="_blank" rel="noopener"><strong>简书主页链接</strong></a>，<strong><a href="http://blog.csdn.net/OBKoro1?skin=dark1" target="_blank" rel="noopener">csdn博客主页链接</a> </strong></p>
<h3 id="参考链接："><a href="#参考链接：" class="headerlink" title="参考链接："></a>参考链接：</h3><p><a href="http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html" target="_blank" rel="noopener">BFC神奇背后的原理</a>，<br><a href="http://www.cnblogs.com/xiaohuochai/p/5248536.html" target="_blank" rel="noopener">深入理解BFC</a><br><a href="http://web.jobbole.com/84808/" target="_blank" rel="noopener">什么是BFC</a><br><a href="https://zjy.name/archives/bfc-introduction.html" target="_blank" rel="noopener">Block Formatting Context (BFC) 浅析</a></p>
<p>以上。2017.5.4.</p>

      
    </div>
    
    
    

    

    
      <div>
        <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
  <div>听说，打赏我的人最后都找到了真爱。</div>
  <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
    <span>打赏</span>
  </button>
  <div id="QR" style="display: none;">

    
      <div id="wechat" style="display: inline-block">
        <img id="wechat_qr" src="/images/pay/weixin.jpg" alt="OBKoro1 微信支付"/>
        <p>微信支付</p>
      </div>
    

    
      <div id="alipay" style="display: inline-block">
        <img id="alipay_qr" src="/images/pay/ali.jpg" alt="OBKoro1 支付宝"/>
        <p>支付宝</p>
      </div>
    

    

  </div>
</div>

      </div>
    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/Css-BFC作用域/" rel="tag"><i class="fa fa-tag"></i> Css-BFC作用域</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2017/10/11/js变量的作用域详解、生存周期，以及一些小细节。/" rel="next" title="js变量的作用域详解、生存周期，以及一些小细节。">
                <i class="fa fa-chevron-left"></i> js变量的作用域详解、生存周期，以及一些小细节。
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2017/10/11/【闭包概念】关于闭包概念不同解读——你可以自己理解。/" rel="prev" title="【闭包概念】关于闭包概念不同解读——你可以自己理解。">
                【闭包概念】关于闭包概念不同解读——你可以自己理解。 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          
            <img class="site-author-image" itemprop="image"
              src="/uploads/hand1.jpg"
              alt="OBKoro1" />
          
            <p class="site-author-name" itemprop="name">OBKoro1</p>
            <p class="site-description motion-element" itemprop="description">种一棵树最好的时间是十年前,其次是现在</p>
        </div>

        <nav class="site-state motion-element">

          
            <div class="site-state-item site-state-posts">
            
              <a href="/archives">
            
                <span class="site-state-item-count">105</span>
                <span class="site-state-item-name">日志</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-categories">
              <a href="/categories/index.html">
                <span class="site-state-item-count">20</span>
                <span class="site-state-item-name">分类</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-tags">
              <a href="/tags/index.html">
                <span class="site-state-item-count">74</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        
          <div class="feed-link motion-element">
            <a href="/atom.xml" rel="alternate">
              <i class="fa fa-rss"></i>
              RSS
            </a>
          </div>
        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/OBKoro1" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>GitHub</a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://juejin.im/user/58714f0eb123db4a2eb95372" target="_blank" title="掘金">
                  
                    <i class="fa fa-fw fa-globe"></i>掘金</a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://obkoro1.com/web_accumulate/" target="_blank" title="前端积累">
                  
                    <i class="fa fa-fw fa-globe"></i>前端积累</a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://segmentfault.com/u/obkoro1/articles" target="_blank" title="segmentfault">
                  
                    <i class="fa fa-fw fa-globe"></i>segmentfault</a>
              </span>
            
          
        </div>

        
        

        
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#写在前面"><span class="nav-number">1.</span> <span class="nav-text">写在前面</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#BFC是什么鬼？"><span class="nav-number">2.</span> <span class="nav-text">BFC是什么鬼？</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#关于BFC的定义："><span class="nav-number">2.0.1.</span> <span class="nav-text">关于BFC的定义：</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#通俗一点的方式解释"><span class="nav-number">2.0.2.</span> <span class="nav-text">通俗一点的方式解释:</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#下面列一波目录，然后分别展开来讲："><span class="nav-number">3.</span> <span class="nav-text">下面列一波目录，然后分别展开来讲：</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#触发条件或者说哪些元素会生成BFC："><span class="nav-number">3.1.</span> <span class="nav-text">触发条件或者说哪些元素会生成BFC：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#BFC布局规则："><span class="nav-number">3.2.</span> <span class="nav-text">BFC布局规则：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#BFC有哪些作用："><span class="nav-number">3.3.</span> <span class="nav-text">BFC有哪些作用：</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#BFC布局规则1：内部的Box会在垂直方向，一个接一个地放置。"><span class="nav-number">3.3.1.</span> <span class="nav-text">BFC布局规则1：内部的Box会在垂直方向，一个接一个地放置。</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#BFC布局规则2：Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。"><span class="nav-number">3.4.</span> <span class="nav-text">BFC布局规则2：Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#BFC的作用4：阻止margin重叠"><span class="nav-number">3.5.</span> <span class="nav-text">BFC的作用4：阻止margin重叠:</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#这里有一个网址可以在线演示，通过演示，可以更直观一点："><span class="nav-number">3.6.</span> <span class="nav-text">这里有一个网址可以在线演示，通过演示，可以更直观一点：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#BFC布局规则3：每个元素的margin-box的左边，-与包含块border-box的左边相接触-对于从左往右的格式化，否则相反-。即使存在浮动也是如此。"><span class="nav-number">3.7.</span> <span class="nav-text">BFC布局规则3：每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#BFC作用3：可以包含浮动元素——清除内部浮动"><span class="nav-number">3.8.</span> <span class="nav-text">BFC作用3：可以包含浮动元素——清除内部浮动</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#BFC布局规则4：BFC的区域不会与float-box重叠："><span class="nav-number">3.9.</span> <span class="nav-text">BFC布局规则4：BFC的区域不会与float box重叠：</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#BFC作用：自适应两栏布局。"><span class="nav-number">3.9.1.</span> <span class="nav-text">BFC作用：自适应两栏布局。</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#BFC-与-Layout"><span class="nav-number">3.10.</span> <span class="nav-text">BFC 与 Layout</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#有趣的文本"><span class="nav-number">3.11.</span> <span class="nav-text">有趣的文本:</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#BFC布局规则5：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。"><span class="nav-number">3.12.</span> <span class="nav-text">BFC布局规则5：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#文本环绕float："><span class="nav-number">3.13.</span> <span class="nav-text">文本环绕float：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#解决："><span class="nav-number">3.14.</span> <span class="nav-text">解决：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#float的定义和用法："><span class="nav-number">3.15.</span> <span class="nav-text">float的定义和用法：</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#后话"><span class="nav-number">4.</span> <span class="nav-text">后话</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#参考链接："><span class="nav-number">4.1.</span> <span class="nav-text">参考链接：</span></a></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy;  2017 &mdash; 
  <span itemprop="copyrightYear">2019</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">OBKoro1</span>

  
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    
      <span class="post-meta-item-text">Site words total count&#58;</span>
    
    <span title="Site words total count">
      156.0k
    </span>
  
</div>




<div>
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span class="site-uv"><i class="fa fa-user"></i> 访问用户： <span class="busuanzi-value" id="busuanzi_value_site_uv">21621</span> 人 </span>
<span class="site-pv"><i class="fa fa-eye"></i> 访问次数： <span class="busuanzi-value" id="busuanzi_value_site_pv">68503</span> 次</span>

</div>



        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  


  











  
  <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

  
  <script type="text/javascript" src="/lib/canvas-nest/canvas-nest.min.js"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.2"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.2"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.2"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.2"></script>



  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.2"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.2"></script>


  

  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.2"></script>



  


  




	





  





  








  



  





  

  
  <script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
  <script>AV.initialize("9ANFp60h6oVyxIPGlau3NOA4-gzGzoHsz", "tMdNuKMbFtN4QsekeNVu83TV");</script>
  <script>
    function showTime(Counter) {
      var query = new AV.Query(Counter);
      var entries = [];
      var $visitors = $(".leancloud_visitors");

      $visitors.each(function () {
        entries.push( $(this).attr("id").trim() );
      });

      query.containedIn('url', entries);
      query.find()
        .done(function (results) {
          var COUNT_CONTAINER_REF = '.leancloud-visitors-count';

          if (results.length === 0) {
            $visitors.find(COUNT_CONTAINER_REF).text(0);
            return;
          }

          for (var i = 0; i < results.length; i++) {
            var item = results[i];
            var url = item.get('url');
            var time = item.get('time');
            var element = document.getElementById(url);

            $(element).find(COUNT_CONTAINER_REF).text(time);
          }
          for(var i = 0; i < entries.length; i++) {
            var url = entries[i];
            var element = document.getElementById(url);
            var countSpan = $(element).find(COUNT_CONTAINER_REF);
            if( countSpan.text() == '') {
              countSpan.text(0);
            }
          }
        })
        .fail(function (object, error) {
          console.log("Error: " + error.code + " " + error.message);
        });
    }

    function addCount(Counter) {
      var $visitors = $(".leancloud_visitors");
      var url = $visitors.attr('id').trim();
      var title = $visitors.attr('data-flag-title').trim();
      var query = new AV.Query(Counter);

      query.equalTo("url", url);
      query.find({
        success: function(results) {
          if (results.length > 0) {
            var counter = results[0];
            counter.fetchWhenSave(true);
            counter.increment("time");
            counter.save(null, {
              success: function(counter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(counter.get('time'));
              },
              error: function(counter, error) {
                console.log('Failed to save Visitor num, with error message: ' + error.message);
              }
            });
          } else {
            var newcounter = new Counter();
            /* Set ACL */
            var acl = new AV.ACL();
            acl.setPublicReadAccess(true);
            acl.setPublicWriteAccess(true);
            newcounter.setACL(acl);
            /* End Set ACL */
            newcounter.set("title", title);
            newcounter.set("url", url);
            newcounter.set("time", 1);
            newcounter.save(null, {
              success: function(newcounter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(newcounter.get('time'));
              },
              error: function(newcounter, error) {
                console.log('Failed to create');
              }
            });
          }
        },
        error: function(error) {
          console.log('Error:' + error.code + " " + error.message);
        }
      });
    }

    $(function() {
      var Counter = AV.Object.extend("Counter");
      if ($('.leancloud_visitors').length == 1) {
        addCount(Counter);
      } else if ($('.post-title-link').length > 1) {
        showTime(Counter);
      }
    });
  </script>



  

  

  

  

  

</body>
</html>

